<template>
	<div class="floor-show" id="floor-show">
		<div v-transfer-dom>
			<!--<loading v-model="isLoading"></loading>-->
		</div>
		<div class="header wrapper home-header">
			<div class="lin1">
				<div class="interest">
					<router-link to="/address" class="clearfix location">
						<i class="location-icon"></i>
							<div class="hrbox">
								<horseRace :msg="position.poiName"></horseRace>
							</div>
						<!--<span>{{position.poiName}}</span>-->
						<!--<i class="right"></i>-->
					</router-link>
					<router-link to="/needshop/1" class="clearfix find">
						<i class="find-icon"></i>
						<span>{{nowSearch}}</span>
					</router-link>
				</div>
			</div>
			<div class="lin-teb" v-if="homeNav.length >1">
				<ul class="swiper-wrapper" :class={flextype:isflex}>
					<li class="swiper-slide" v-for="(item, index) in homeNav" :key="item.id">
						<router-link href="javascript:;" v-bind:class="{ 'curr': isCurr(item.elementDesc, index) }" :to="'/index/'+item.elementDesc">
							<span>{{ item.elementName }}</span>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<transition name="myfade">
			<router-view></router-view>
		</transition>
		<div class="return_top" v-if="showBackStatus" @click="backTop"></div>
	</div>
</template>
<script>
import { Loading, TransferDomDirective as TransferDom } from 'vux'
import { mapState, mapGetters, mapMutations } from 'vuex'

import { getHomeNav, getHomeContent, homePageSearchMsg } from '@/service/getData'
import fetch from '@/config/fetch'
import {
	getPageParam
} from '@/config/utils'
import {
	snxd,
	img,
	cmslib
} from '@/config/env'

import { showBack, animate } from '@/config/wtool'
import horseRace from './components/_horse_race_box.vue'

var baseList = {}
export default {
	data() {
		return {
			isLoading: '',
			direction: '',
			showFooter: true,
			isflex: false,
			homePageData: {},
			routerType: this.$store.state.home.defaultpage,
			indexNav: '',
			homeNavList: '',
			homeNav: [],
			showBackStatus: false, // 显示返回顶部按钮
			nowSearch: '',//接口获取搜索内容
			isCurr(param, index) {
				if (!this.$route.params.type) {
					if (index == 0) {
						return true
					};
				} else {
					if (param == this.$route.params.type) {
						return true
					};
				};
			}
		}
	},
	created() {
		console.log("app 开始 created")
		if (this.isPosition) {
			this.indexNav = ''
			this.$store.commit('SET_INDEX_TAG', '')
			this.homeNav = []
			this.getHomePage();
		}
		this.$nextTick(() => {
			showBack(status => {
				this.showBackStatus = status;
			}, 'floor-show')
		})
	},
	components: {
		Loading,horseRace
	},
	methods: {
		backTop() {
			animate(document.getElementById('floor-show'), { scrollTop: '0' }, 400, 'ease-out');
		},
		getHomePage() {
			// 接口获取搜索内容
			homePageSearchMsg().then(res => {
				if (res.resultCode == '1' && res.resultData.length != 0) {
					this.nowSearch = res.resultData[0].paramInfo
				} else {
					this.nowSearch = '发现品质生活'
				}
			})
			fetch({
				url: snxd + '/home/getPoiInfoHomePageNew.do',
				params: {
					'storeLocation': this.$store.state.position.storeLocation,
					'version': '3.0.0',
					'poiId': this.$store.state.position.poiId,
					'cityCode': this.$store.state.position.cityCode
				}
			}).then(res => {
				if (res.code != '1') {
					return
				}
				let data = res.data
				if (data.homePageUrl) {
					let nav = getPageParam(data.homePageUrl)
					let notice;
					if (data.bulletinUrl && /^http/.test(data.bulletinUrl)) {
						notice = getPageParam(data.bulletinUrl)
					}
					this.indexNav = nav
					// this.$store.commit('setIndexNav', nav);
					this.$store.commit('setIndexNotice', notice);
					this.getHomeNav(nav);
				}
			})
		},
		getHomeNav(nav) {
			// 没有获取过
			if (this.homeNav.length == 0 || this.indexNav != nav) {
				this.indexNav = nav
				let callback = `cb${Math.floor(Math.random() * 1000000)}`
				let url = `${cmslib}/api/jsonp/cb/${this.indexNav}-${callback}.jsonp`
				fetch({
					url: url,
					params: {},
					jsonp: 'callback',
					jsonpCallback: callback
				}).then(res => {
					if (!res.xd_noticebody) {
						alert("网络错误")
						return
					}
					this.homeNav = res.xd_noticebody.tag
					// this.$store.commit('setHomeNav',list);
					this.navBox()
					this.changeflex()
					let nowtag
					if (this.indextag) {
						nowtag = this.indextag
					} else {
						nowtag = this.homeNav[0].elementDesc
						this.$store.commit('SET_INDEX_TAG', nowtag)
					}
					this.$router.replace(`/index/${nowtag}`)
				})
			} else {
				this.navBox()
				this.changeflex()
				let nowtag
				if (this.indextag) {
					nowtag = this.indextag
				} else {
					nowtag = this.homeNav[0].elementDesc
					this.$store.commit('SET_INDEX_TAG', nowtag)
				}
				this.$router.replace(`/index/${nowtag}`)
			}
		},

		// 创建导航swiper
		navBox() {
			var navBox = document.querySelector('.lin-teb');
			var loadSwiper = setInterval(() => {
				if (typeof Swiper != 'undefined') {
					clearInterval(loadSwiper);
					var navSwiper = new Swiper(navBox, {
						slidesPerView: 'auto',
						paginationClickable: true,
						freeMode: true
					});
				}
			}, 500)
		},
		changeflex() {
			if (this.homeNavList.length <= 5) {
				this.isflex = true
			} else {
				this.isflex = false
			}
		}
	},
	computed: {
		...mapGetters([
			'position', 'indextag'
		]),

		// 监听得到默认页面
		isPosition() {
			return this.$store.state.position.storeLocation;
		},
	},

	directives: {
		TransferDom
	}
}
</script>

<style lang="scss" scoped>
// @import 'src/style/mixin';
@import './components/tool.scss';

.myfade-enter-active,
.myfade-leave-active {
	transition: opacity .5s;
}

.myfade-leave,
.myfade-leave-active {
	display: none;
}

.myfade-enter,
.myfade-leave-active {
	opacity: 0;
}

.floor-show {
	background: #f1f1f1;
	padding-top: to_rem(80px);
	padding-bottom: _(300);
}

.flextype {
	display: -webkit-box;
	-webkit-box-align: center;
	display: flex;
	li {
		flex: 1;
		-moz-box-flex: 1;
		-ms-flex: 1;
	}
}

.gallery-top {
	height: 500px;
	width: 100%;
}

.gallery-top .swiper-slide {
	width: 100%;
	height: 500px;
}


.header {
	width: 15rem; // height: _(140);
	position: fixed;
	background-color: rgba(255, 255, 255, .95);
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	box-sizing: border-box;
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
	.lin1 {
		width: 100%;
		height: _(80);
		padding-top: _(10);
		.interest {
			width: 100%;
			height: _(70);
			line-height: _(70);
			position: relative;
			.clearfix {
				float: left;
			}
			.location {
				width: _(250);
				height: 100%;
				position: relative;
				float: left;
				.location-icon {
					display: block;
					width: _(25);
					height: _(28);
					background-image: url('/static/images/location.png');
					background-size: 100% 100%;
					position: absolute;
					top: _(21);
					left: _(30);
				}
				.hrbox {
					display: block;
					width: _(209);
					height: _(40);
					position: absolute;
					top: _(15);
					left: _(68);
				}
				// span {
				// 	display: inline-block;
				// 	font-size: _(28);
				// 	width: _(163);
				// 	height: 100%;
				// 	margin-left: _(68);
				// 	white-space: nowrap;
				// 	overflow: hidden;
				// 	text-overflow: ellipsis;
				// }
				.right {
					display: block;
					width: _(10);
					height: _(17);
					background-image: url('/static/images/right.png');
					background-size: 100% 100%;
					position: absolute;
					top: _(26);
					right: 0;
				}
			}
			.find {
				width: _(440);
				height: 100%;
				margin-left: _(27);
				position: relative;
				.find-icon {
					display: block;
					position: absolute;
					width: _(28);
					height: _(28);
					top: _(22);
					left: _(25);
					background-image: url('/static/images/find.png');
					background-size: 100% 100%;
				}
				span {
					display: block;
					width: 100%;
					height: _(56);
					line-height: _(56);
					border-radius: _(28);
					background: rgba(0, 0, 0, 0.05);
					font-size: _(28);
					color: #aaa;
					margin-top: _(7);
					text-indent: _(60);
				}
			}
			.sao {
				display: block;
				position: absolute;
				width: _(38);
				height: _(38);
				background-image: url('/static/images/sao.png');
				background-size: 100% 100%;
				top: _(16);
				right: _(30);
			}
		}
	}
}


.header .lin-teb {
	width: 100%;
	height: _(60);
}

.header .lin-teb ul {
	white-space: nowrap;
	position: absolute;
	height: _(60);
}

.header .lin-teb li {
	display: inline-block;
	width: 2.5rem;
	height: _(60);
	text-align: center
}

.header .lin-teb li a {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	line-height: 1.44rem;
	font-size: 0.56rem;
	color: #444;
	width: 100%;
}

.header .lin-teb li a.curr span {
	display: inline-block;
	height: 100%;
	color: #ff6600;
	border-bottom: 0.08rem solid #f60
}

.tab-swiper {
	background-color: #fff;
	height: 100px;
}

.return_top {
	position: fixed;
	bottom: 3rem;
	right: 1rem;
	z-index: 30;
	width: _(80);
	height: _(80);
	background-image: url('/static/images/back2top.png');
	background-size: 100% 100%;
}
</style>
